<template>
   <div class="tabbar">
     <tab-item v-for="(item,index) in list" 
        :key="index" 
        :item="item" 
        :index="index"
        class="tabbar-item-box"
        @getIndex="getIndexMethod"
        :style="{color:cur==index?'red':''}">
     </tab-item>
   </div>
</template>

<script>
import TabItem from '@/components/tabbar/TabItem.vue'
export default {
    data(){
        return{
            cur:0
        }
    },
    components:{
        TabItem
    },
    props:{
        list:Array
    },
    methods:{
        getIndexMethod(val){
            console.log('父组件',val);
            this.cur=val
        }
    }
}
</script>

<style lang="scss">
@import url('@/assets/css/base.css');
    .tabbar{
        display: flex;
        width: 100vw;
        background-color: white;
        padding: 10px 0px;
        position:sticky;
        bottom: 0;
        border-top: 1px solid #ccc;
        .tabbar-item-box{
            flex: 1;
            text-align: center;
        }
    }
</style>